<template class="dashBoardChartB">
    <div id="main-temprature"/>
</template>

<script setup>
// 官网 https://echarts.apache.org/examples/zh/editor.html?c=gauge-temperature
import {onMounted} from "vue";
import * as echarts from 'echarts';
import {reactive} from 'vue'

const setEchartWH = reactive({ //设置控制图表大小变量
    width: '400px',
    height: '400px'
});
onMounted(()=> {
    setEchartWH.width = '180px';
    setEchartWH.height = '150px';

    draw(setEchartWH);
})

function draw(setEchartWH) {

    var chartDom = document.getElementById('main-temprature');
    var myChart = echarts.init(chartDom,null,setEchartWH);
    var option;

    option = {
        series: [
            {
                type: 'gauge',
                center: ['50%', '60%'],
                startAngle: 200,
                endAngle: -20,
                min: 0,
                max: 60,
                splitNumber: 12,
                itemStyle: {
                    color: '#FFAB91'
                },
                progress: {
                    show: true,
                    width: 10               //表盘进度条宽度
                },
                pointer: {
                    show: false
                },
                axisLine: {
                    lineStyle: {            //表盘背景圆环宽度
                        width: 15
                    }
                },
                axisTick: {
                    distance: -25,                  //小刻度
                    splitNumber: 5,
                    lineStyle: {
                    width: 1,                       //小刻度宽度
                        color: '#999'
                    }
                },
                splitLine: {                        //大刻度
                    distance: -29,                  //大刻度跟图形的距离
                    length: 10,                     //大刻度长度
                    lineStyle: {
                        width: 2,                   //大刻度宽度
                        color: '#999'
                    }
                },
                axisLabel: {
                    distance: -5,                  //刻度跟数字的距离
                    color: '#999',
                    fontSize: 10                    //刻度标上的数字的字号
                },
                anchor: {
                    show: false
                },
                title: {
                    show: false
                },
                detail: {
                    valueAnimation: true,
                    width: '50%',
                    lineHeight: 40,
                    borderRadius: 8,
                    offsetCenter: [0, '0%'],
                    fontSize: 15,                       //温度值字号
                    fontWeight: 'bolder',
                    formatter: '{value} °C',
                    color: 'inherit'
                },
                data: [
                    {
                        value: 20
                    }
                ]
            },
            {
                type: 'gauge',
                center: ['50%', '60%'],
                startAngle: 200,
                endAngle: -20,
                min: 0,
                max: 60,
                itemStyle: {
                    color: '#FD7347'
                },
                progress: {
                    show: true,
                    width: 8
                },
                pointer: {
                    show: false
                },
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                splitLine: {
                    show: false
                },
                axisLabel: {
                    show: false
                },
                detail: {
                    show: false
                },
                data: [
                    {
                        value: 20
                    }
                ]
            }
        ]
    };
    setInterval(function () {
        const random = +(Math.random() * 60).toFixed(2);
        myChart.setOption({
            series: [
                {
                    data: [
                        {
                            value: random
                        }
                    ]
                },
                {
                    data: [
                        {
                            value: random
                        }
                    ]
                }
            ]
        });
    }, 2000);

    option && myChart.setOption(option);

}
</script>

<style scoped>
.dashBoardChartB {
    width: 60%;
    text-align: center;
}

#main {
    width: 100%;
    height: 100%;
}
</style>
